<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>数据表格</title>
    <link href="../../component/layui/css/layui.css" rel="stylesheet" />
    <link href="../../admin/css/pearButton.css" rel="stylesheet"/>
    <link href="../../admin/css/pearCommon.css" rel="stylesheet"/>
    <link href="../../admin/css/pearTable.css" rel="stylesheet"/>
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="javascript:void(0);">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="realName" id="date1" hover autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">账户</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" hover autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button type="submit" class="pear-btn pear-btn-md pear-btn-primary layui-icon layui-icon-search"  lay-submit="" lay-filter="select">&nbsp;查询</button>
                        <button type="reset" class="pear-btn pear-btn-md pear-btn-primary layui-icon layui-icon-refresh" plain>&nbsp;重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--视图布局-->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="genTable" lay-skin="line" lay-filter="userTable"></table>
    </div>
</div>

<!--头工具栏-->
<script type="text/html" id="toolbar">
    <button class="layui-icon layui-icon-add-1 pear-btn pear-btn-primary pear-btn-md"  lay-event="add">&nbsp;新增</button>
    <button class="layui-icon layui-icon-delete pear-btn pear-btn-danger pear-btn-md"  lay-event="del" >&nbsp;批量删除</button>
</script>

<!--行工具栏-->
<script type="text/html" id="barDemo">
    <button class="layui-icon layui-icon-edit pear-btn pear-btn-primary pear-btn-sm"  lay-event="edit" />
    <button class="layui-icon layui-icon-delete pear-btn pear-btn-danger pear-btn-sm"   lay-event="del" />
</script>

<!--字段格式化-->
<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ d.status == 0 ? 'checked' : '' }}>
</script>

<script type="text/html" id="sex">
    {{#if (d.sex == 0) { }}
    <span>男</span>
    {{# }else if(d.sex == 1){ }}
    <span>女</span>
    {{# } }}
</script>

<script type="text/html" id="createTime">
    <div> {{layui.util.toDateString(d.createTime, "yyyy年MM月dd日")}} </div>
</script>

<!--逻辑脚本-->
<script src="../../component/layui/layui.js"></script>
<script   type="text/javascript"  th:inline="none">
    layui.use(['table','form','operate'],function(){
        var table = layui.table;
        var form = layui.form;
        var operate = layui.operate;

        table.render({
            elem: '#genTable',
            url: '/gen/table/data',
            page: true ,
            skin:'line',
            defaultToolbar: [{title: '刷新',layEvent: 'refresh',icon: 'layui-icon-refresh'},'filter', 'exports', 'print'],
            toolbar: "#toolbar",
            cols:[[
                {type:  'checkbox'},
                {field: 'name', title: '表名称'},
                {field: 'comment', title: '备注'},
                {field: 'sex', title: '性别',templet:'#sex'},
                {field: 'status', title: '状态',templet:'#status'},
                {field: 'createTime', title: '注册时间', templet:'#createTime'},
                {title: '操作', width: 150, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //头工具栏监听
        table.on('toolbar(userTable)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;

            if (obj.event === 'add') {

                operate.open("导入","/gen/table/add",{width:"700px",height:"530px"});

            } else if(obj.event === 'del'){

                operate.removeByIds('/system/user/deleteByIds',operate.arrayToStr(data),'userTable');

            } else if(obj.event === 'refresh'){

                table.reload('userTable');
            }

        });

        table.on('tool(userTable)', function(obj) {
            var data = obj.data,
                event = obj.event;

            if (event === 'del') {

                operate.removeById('/system/user/deleteById',data['id'],'userTable');

            } else if (event === 'edit') {

                operate.open("用户修改","/system/user/edit?id="+data['id'],{width:'700px',height:'450px'});
            }
        });

        //监听账号状态切换
        form.on('switch(status)', function(obj){
            if(obj.elem.checked){
                operate.put('/system/user/enable/'+obj.value,null,function(result){
                    console.log("开启");
                });
            }else{
                operate.put('/system/user/disable/'+obj.value,null,function(result){
                    console.log("关闭");
                });
            }
        });

        //监听账号状态查询
        form.on('submit(select)', function(data){
            table.reload('userTable', {where: data.field,page: {curr: 1}});
        });

    })


</script>

</body>
</html>